<template>
  <div style="width: 1200px;background-color:white;margin: 0 auto;margin-top: 65px">
    <div style="margin-left: 100px">
      <el-aside width="320px" style="float: left;">
        <el-card style="border-radius: 10px">
        <h3>租车筛选</h3>
        <div style="padding: 15px;padding: 0">
          <h5 style="margin-left: -210px">热租城市</h5>

          <el-row :gutter="10">
            <el-col :span="6" v-for="item in cityArr">
              <div class="label">
                <a @click="getCityId(item.id)"
                   style="font-size: 14px;text-decoration:none;color: black;:hover {color: #00cf97;}" >{{ item.name }}</a>
              </div>
            </el-col>
          </el-row>
        </div>
        <div style="padding: 15px;padding: 0">



          <h5 style="margin-left: -210px">热门品牌</h5>
<!--  品牌列表        -->
          <el-row :gutter="10">
            <el-col :span="6" v-for="item in brandArr">
              <div class="label">
                <a @click="getBrandId(item.id)"
                   style="font-size: 14px;text-decoration:none;color: black;:hover {color: #00cf97;}">{{ item.name }}</a>
              </div>
            </el-col>
          </el-row>
        </div>
        </el-card>
      </el-aside>
    </div>


    <div style="width: 700px;float: left">

      <!--   租车价格及评价   -->
      <el-main style="margin: 0; padding: 0">
        <div style="align: center">
          <h3>租车价格及评价</h3>
          <div style="padding: 0">
            <a href="https://www.atzuche.com/signup?utm_source=seocity&utm_medium=seocity&utm_campaign=seocity&utm_term=aa84ec947f0a72b161a8d27598eda21e"><img
                src="https://beijing.atzuche.com/static/media/banner.482c8394.png"
                style="border-radius: 13px;width: 670px; height: 176px;">
            </a>
          </div>
          <!--   租车价格及评价结束   -->

          <!--日租车辆以及摘要-->
          <div v-for="item in carArr">
            <div style="padding: 16px; text-align: left">
              <div>
                <img :src="'http://localhost:19283'+item.imgUrl" width="190px" height="148px"
                     align="left" style="margin: 0px 10px 10px 0;border-radius: 8px">
              </div>
              <span style="margin: 0;font-size: 20px;">{{item.name}} </span>
              <div style="text-align: right;float: right;width: 280px">
                <span>￥<span style="font-size: 25px">{{item.priceDay}}</span>/天</span>
              </div>
              <p style="color: rgb(215,215,215); margin: 0;font-size: 13px;">{{item.number}} | {{item.type}} | {{item.displacement}}</p>
              <span class="xing"><img
                  src=""
                  width="13px" height="13px">&nbsp;</span>
              <span class="xing"><img
                  src=""
                  width="13px" height="13px">&nbsp;</span>
              <span class="xing"><img
                  src=""
                  width="13px" height="13px">&nbsp;</span>
              <span class="xing"><img
                  src=""
                  width="13px" height="13px">&nbsp;</span>
              <span class="xing"><img
                  src=""
                  width="13px" height="13px">&nbsp;</span>
              <span style="font-size: 13px;">5分</span>
              <div style="margin: 0">
              <span
                  style="margin: 0;border: 1px solid #bf782c;color: #bf782c;border-radius: 5px;font-size: 14px;margin:15px 5px 15px 0">7天95折</span>
                <span
                    style="margin: 0;border: 1px solid #bf782c;color: #bf782c;border-radius: 5px;font-size: 14px;margin:0 0 15px 0">信用双免</span>
              </div>
              <div>
                <div style="position: relative">
                <span
                    style="margin: 10px 0; display:block;font-size: 13px;color: #2c9b8e;background-color: rgba(44,155,142,.05);">好评，车子车况很好，也算体验了一下小跑车</span>
                  <span
                      style="margin: 10px 0;display:block;font-size: 13px;color: #2c9b8e;background-color: rgba(44,155,142,.05);">不错，没想到还能在这个平台租到718</span>
                  <a @click="detail(item.id)"
                     style="position: absolute;left: 545px;bottom: 1px;background-color: #00cf97;
                     border-radius: 55px;color: white;font-size: 10px;padding: 7px 16px;text-decoration: none;">立即预定</a>
                </div>
              </div>
            </div>
          </div>

          <!--日租车辆以及摘要结束-->
        </div>
      </el-main>
      <!--分页-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="8"
          layout="prev, pager, next, jumper"
          :total= total>
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  name: "DuanzuView",
  data() {
    return {
      cityArr: [],
      brandArr: [],
      carArr: [],
      currentPage: 1, // 当前页码，与后端同步
      pageSize: 8, // 每页显示的数量，可以根据实际情况修改
      total: 0, // 总数量，从后端获取
      page : 1,
    }
  },
  methods: {
    handleCurrentChange(currentPage) {
      console.log(`当前页: ${currentPage}`);
      this.page = currentPage;
      this.axios.get("http://localhost:19482/car/list/"+currentPage)
          .then((response)=>{
            if (response.data.state==20000){
              // pageData
              this.carArr = response.data.data.list;
            }
          })
    },
    detail(id){
      this.axios.get('http://localhost:19482/car/'+ id ).then((response) => {
        if (response.data.state == 20000) {
          this.car = response.data.data
          this.$router.push("/detail?id="+id);
        }else {
          this.$confirm(response.data.message, {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'})
        }
      })

    },
    getCityId(id){
      this.$router.push("/duanzu?cityId="+id);
      this.listByCityId(id);
    },
    listByCityId(id){
      this.axios.get("http://localhost:19482/car/listCity/" + id)
          .then((response) => {
            if (response.data.state == 20000) {
              this.carArr = response.data.data.list;
            }
          })
    },
    getBrandId(id){
      this.$router.push("/duanzu?BrandId="+id);
      this.listByBrandId(id);
    },
    listByBrandId(id){
      this.axios.get("http://localhost:19482/car/listBrand/" + id)
          .then((response) => {
            if (response.data.state == 20000) {
              this.carArr = response.data.data.list;
            }
          })
    }
  },
  mounted() {
    if (location.search.includes('brandId')) {
      let id = new URLSearchParams(location.search).get('brandId');
      //通过品牌id查询车辆列表
      this.listByBrandId(id)
    } else if(location.search.includes('cityId')){
      let id = new URLSearchParams(location.search).get('cityId');
      //通过城市id查询车辆列表
      this.listByCityId(id);
    } else {
      this.axios.get("http://localhost:19482/car/list/"+this.currentPage)
          .then((response) => {
            if (response.data.state == 20000) {
              this.carArr = response.data.data.list;
              this.total=response.data.data.total;
              console.log(this.carArr);
            }
          })
    }

    this.axios.get("http://localhost:19483/city")
        .then((response) => {
          if (response.data.state == 20000) {
            this.cityArr = response.data.data;
          }
        });
    this.axios.get("http://localhost:19481/brand/listAll")
        .then((response) => {
          if (response.data.state == 20000) {
            this.brandArr = response.data.data;
          }
        })
  }
}
</script>

<style scoped>
.label{
  border: 1px solid grey;border-radius: 15px;margin: 4px 0;padding: 4px 0px;opacity:0.7;width: 63px
}
.label:hover{
  border: 1px solid #00cf97;
  color: #00cf97;
}
</style>